<template>
    <uni-popup ref="popup" type="center" :show="showPopup" @close="$emit('close')" :mask-close="false"
        :is-mask-click="false">
        <view class="popup-content">

            <svg t="1756001599375" class="closeicon" viewBox="0 0 1024 1024" version="1.1" @click="closeshow"
                xmlns="http://www.w3.org/2000/svg" p-id="5055" width="200" height="200">
                <path
                    d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384-172.8-384-384-384z m166.4 544c-6.4 6.4-12.8 6.4-19.2 6.4-6.4 0-12.8 0-19.2-6.4L512 550.4l-121.6 128c-6.4 6.4-12.8 6.4-19.2 6.4-6.4 0-12.8 0-19.2-6.4-12.8-12.8-12.8-32 0-44.8l121.6-128-128-121.6c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l128 121.6 121.6-128c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L556.8 512l128 121.6c6.4 6.4 6.4 25.6-6.4 38.4z"
                    fill="#11a8db" p-id="5056"></path>
            </svg>
            <div class="container">
                <div class="header">
                    <h1>收货地址填写</h1>
                    <p>请填写您的真实信息,才可拿到现金</p>
                </div>

                <form>
                    <div class="form-group">
                        <label class="required">真实姓名</label>
                        <input type="text" class="form-control" :class="{ error: errors.name }" v-model="formData.username"
                            placeholder="请输入真实姓名" @blur="validateName">
                        <div class="error-message" v-if="errors.name">
                            <i>⚠</i> {{ errors.name }}
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="required">手机号码</label>
                        <input type="tel" class="form-control" :class="{ error: errors.phone }" v-model="formData.phone"
                            placeholder="请输入11位手机号码" @blur="validatePhone" maxlength="11">
                        <div class="error-message" v-if="errors.phone">
                            <i>⚠</i> {{ errors.phone }}
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="required">身份证号</label>
                        <input type="text" class="form-control" :class="{ error: errors.idCard }" v-model="formData.idCard"
                            placeholder="请输入18位身份证号码" @blur="validateIdCard" maxlength="18">
                        <div class="error-message" v-if="errors.idCard">
                            <i>⚠</i> {{ errors.idCard }}
                        </div>
                    </div>



                    <button type="submit" class="btn-submit" @click="submitForm">提交信息</button>
                </form>
            </div>

        </view>
    </uni-popup>
</template>

<script>
import request from '@/utils/request.js';
export default {
    props: {
    },
    data() {
        return {
            formData: {
                name: '',
                phone: '',
                idCard: ''
            },
            errors: {
                name: '',
                phone: '',
                idCard: ''
            },
            showPopup: false
        }
    },
    created() {
        if (localStorage.getItem("userinfo")) {
            let item = JSON.parse(localStorage.getItem("userinfo"))
            this.formData.username = item.username ? item.username : ''
            this.formData.phone = item.phone ? item.phone : ''
            this.formData.idCard = item.idCard ? item.idCard : ''
        }
    },
    methods: {
        closeshow() {
            this.closed()
        },
        open() {
            this.$refs.popup.open()
        },
        closed() {
            this.$refs.popup.close()
        },
        validateName() {
            if (!this.formData.username) {
                this.errors.name = '请输入真实姓名';
                return false;
            } else if (this.formData.username.length < 2) {
                this.errors.name = '姓名至少需要2个字符';
                return false;
            } else {
                this.errors.name = '';
                return true;
            }
        },

        validatePhone() {
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!this.formData.phone) {
                this.errors.phone = '请输入手机号码';
                return false;
            } else if (!phoneRegex.test(this.formData.phone)) {
                this.errors.phone = '请输入有效的手机号码';
                return false;
            } else {
                this.errors.phone = '';
                return true;
            }
        },

        validateIdCard() {
            const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if (!this.formData.idCard) {
                this.errors.idCard = '请输入身份证号码';
                return false;
            } else if (!idCardRegex.test(this.formData.idCard)) {
                this.errors.idCard = '请输入有效的身份证号码';
                return false;
            } else {
                this.errors.idCard = '';
                return true;
            }
        },

        async getuser() {
            let res = await request({
                url: "/api/user/getUserInfo",
                data: {
                    user_id: JSON.parse(localStorage.getItem("userinfo")).id
                },
                method: 'GET',
            })
            this.total_draw_count = res.data.total_draw_count
            this.daily_answer_count = res.data.daily_answer_count
            localStorage.setItem("userinfo", JSON.stringify(res.data))
            this.closed()
        },
        submitForm() {
            const isNameValid = this.validateName();
            const isPhoneValid = this.validatePhone();
            const isIdCardValid = this.validateIdCard();

            if (isNameValid && isPhoneValid && isIdCardValid) {
                // 表单验证通过，显示成功弹窗
                this.showPopup = true;

                // 这里可以添加提交数据的逻辑，例如API调用

                request({
                    url: "/api/user/save",
                    method: 'POST',
                    data: {
                        username: this.formData.username,
                        phone: this.formData.phone,
                        idcard: this.formData.idCard,
                        invite_code: this.inviteCode
                    }
                }).then(res => {
                    console.log(res)

                    this.showxinxi = false;
                    uni.showToast({
                        title: '提交成功',
                        icon: 'success'
                    });
                });
                this.getuser()

                // localStorage.setItem("userinfo", JSON.stringify(this.formData))

                console.log('表单提交数据:', this.formData);
            } else {
                // 表单验证失败，滚动到第一个错误处
                this.$nextTick(() => {
                    const firstError = document.querySelector('.error');
                    if (firstError) {
                        firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                });
            }
        },

        closePopup() {
            this.showPopup = false;
            // 可选：重置表单
            // this.resetForm();
        },

        resetForm() {
            this.formData = {
                name: '',
                phone: '',
                idCard: '',
                address: ''
            };
            this.errors = {
                name: '',
                phone: '',
                idCard: '',
                address: ''
            };
        }
    }
}
</script>
<style scoped>
.closeicon {
    width: 80rpx;
    height: 80rpx;
    position: absolute;
    right: 30rpx;
    top: 25rpx;
}

.required {
    text-align: left;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, sans-serif;
}

body {
    background-color: #f7f9fc;
    color: #333;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.container {
    background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
    border-radius: 16px;
    padding: 24px 0;
    box-shadow: 0 8px 20px rgba(173, 216, 230, 0.2);
}

.header {
    text-align: center;
    margin-bottom: 28px;
}

.header h1 {
    color: #1890ff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.header p {
    color: #69c0ff;
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #1890ff;
    font-weight: 500;
    font-size: 15px;
}

.form-control {
    width: 100%;
    padding: 0 16px;
    border: 1px solid #91d5ff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 80rpx;
    min-height: 80rpx;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
    text-align: left;
}

.form-control:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-control.error {
    border-color: #ff7875;
}

.error-message {
    color: #ff7875;
    font-size: 13px;
    margin-top: 5px;
    display: flex;
    align-items: center;
}

.error-message i {
    margin-right: 5px;
}

.btn-submit {
    width: 100%;
    padding: 0 16px;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;

    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.btn-submit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4);
}

.required::after {
    content: '*';
    color: #ff7875;
    margin-left: 3px;
}

.popup-content {
    background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
    border-radius: 16px;
    padding: 30px;
    width: 85vw;
    text-align: center;
}

.success-icon {
    font-size: 60px;
    color: #52c41a;
    margin-bottom: 20px;
}

.popup-content h2 {
    color: #1890ff;
    margin-bottom: 15px;
}

.popup-content p {
    color: #595959;
    margin-bottom: 25px;
    line-height: 1.5;
}

.btn-close {
    padding: 12px 25px;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}
</style>